<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 标签组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
</head>
<body>
  <div class="container">
    <h1 class="title title-large">标签组件示例</h1>
    
    <!-- 基础标签 -->
    <div class="example-section">
      <h2 class="example-section-title">基础标签</h2>
      <div class="example-group">
        <span class="tag">默认标签</span>
        <span class="tag tag-primary">主要标签</span>
        <span class="tag tag-success">成功标签</span>
        <span class="tag tag-warning">警告标签</span>
        <span class="tag tag-danger">危险标签</span>
        <span class="tag tag-secondary">次要标签</span>
      </div>
    </div>
    
    <!-- 标签尺寸 -->
    <div class="example-section">
      <h2 class="example-section-title">标签尺寸</h2>
      <div class="example-group">
        <span class="tag tag-small">小标签</span>
        <span class="tag">默认标签</span>
        <span class="tag tag-large">大标签</span>
      </div>
    </div>
    
    <!-- 填充标签 -->
    <div class="example-section">
      <h2 class="example-section-title">填充标签</h2>
      <div class="example-group">
        <span class="tag tag-primary tag-filled">主要填充</span>
        <span class="tag tag-success tag-filled">成功填充</span>
        <span class="tag tag-warning tag-filled">警告填充</span>
        <span class="tag tag-danger tag-filled">危险填充</span>
      </div>
    </div>
    
    <!-- 可关闭标签 -->
    <div class="example-section">
      <h2 class="example-section-title">可关闭标签</h2>
      <div class="example-group">
        <span class="tag tag-close tag-primary">
          可关闭
          <span class="tag-close-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
          </span>
        </span>
        <span class="tag tag-close tag-success">
          成功标签
          <span class="tag-close-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
          </span>
        </span>
        <span class="tag tag-close tag-warning">
          警告标签
          <span class="tag-close-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
          </span>
        </span>
      </div>
    </div>
    
    <!-- 标签组 -->
    <div class="example-section">
      <h2 class="example-section-title">标签组</h2>
      <div class="tag-group">
        <span class="tag tag-primary">HTML</span>
        <span class="tag tag-success">CSS</span>
        <span class="tag tag-warning">JavaScript</span>
        <span class="tag tag-danger">TypeScript</span>
        <span class="tag tag-secondary">React</span>
        <span class="tag tag-secondary">Vue</span>
      </div>
    </div>
    
    <!-- 标签应用场景 -->
    <div class="example-section">
      <h2 class="example-section-title">标签应用场景</h2>
      
      <h3 class="title title-sub-medium mb-medium">文章标签</h3>
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">文章标题</h3>
          <div class="tag-group mt-small">
            <span class="tag tag-primary tag-small">前端</span>
            <span class="tag tag-success tag-small">CSS</span>
            <span class="tag tag-info tag-small">设计</span>
          </div>
        </div>
        <div class="card-content">
          <p class="text">这是文章的内容摘要...</p>
        </div>
      </div>
      
      <h3 class="example-subtitle">筛选标签</h3>
      <div class="example-group">
        <span class="tag tag-close tag-primary">
          已选：价格
          <span class="tag-close-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
          </span>
        </span>
        <span class="tag tag-close tag-primary">
          已选：品牌
          <span class="tag-close-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
          </span>
        </span>
        <button class="button button-text">清空</button>
      </div>
    </div>
  </div>
</body>
</html>

